<template>
    <el-row>
        <el-row class="top-box">
            <el-col :span="16">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    :cell-style="{maxHeight:'30px'}">
                    <el-table-column label="产品名称" width="400px">
                        <template slot-scope="scope"> 
                            <el-row>
                                <el-col :span="6"  class="img-box">
                                    <img width="100%" height="100%" :src="scope.row.img" alt="">
                                </el-col>
                                <el-col :span="14">{{scope.row.text}}</el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="数量">
                        <template slot-scope="scope">
                            <el-row>{{scope.row.num}}</el-row>
                            <el-row>X{{scope.row.onePice}}</el-row>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="合计价格">
                        <template slot-scope="scope">
                            <el-row>￥{{scope.row.allPrice}}</el-row>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="6" :offset="2" >
                <el-card class="box-card" :body-style="{ padding: '10px' }">
                    <el-row class="top">
                        <el-row>
                            <el-col :span="6">商品总价</el-col>
                            <el-col :span="6" :offset="12">￥73.50</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6">物流费用</el-col>
                            <el-col :span="3" :offset="14" >包邮</el-col>
                        </el-row>
                    </el-row>
                    <hr>
                    <el-row class="bottom">
                        <el-col :span="6">合计金额</el-col>
                        <el-col class="all-price" :span="7" :offset="11">￥73.50</el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <el-row class="bottom-box">
            <el-col :span="16">
                <el-row class="title">选择常用联系人</el-row>
                <hr>
                <el-row >
                    <el-row class="title">请选择支付方式</el-row>
                    <el-row>
                        <el-col :span="4"><img src="" alt=""></el-col>
                        <el-col :span="4"><img src="" alt=""></el-col>
                        <el-col :span="4" class="">电子钱包</el-col>
                    </el-row>
                </el-row>
                <hr>

            </el-col>
        </el-row>
    </el-row>

</template>

<script>
export default {
    data(){
        return {
            tableData: [
                {
                    img: 'http://10.203.0.101:8081/shopping/resources/upload/97812ce7d175451484ce43705ad6d5c3.jpg',
                    text: ' 密园小农 密云当地新鲜西红柿 约2kg 自然熟 沙瓤 新鲜蔬菜',
                    num: 1,
                    onePice:'73.50',
                    allPrice: '73.50'
                }
            ],
        }
    },
}
</script>

<style scoped>
.img-box{
    width: 80px;
    height: 35px;
}

.box-card{
    background: rgba(0,0,0,0.03);
}
.all-price{
    font-size: 20px;
    color: #333;
}
.bottom-box{
    margin: 20px 0px ;
}
.title{
    margin: 20px 0;
    font-weight: 700;
    font-size: 20px;
    color: #666;
}
</style>